<!DOCTYPE html>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Project Live3D</title>

<!-- Online key-->
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAqX9Vvx4F515h2PjLW4Ab4xRlthyyBK9AJWKvxUYMMyGX4kWS8hQUiHIxMA0Qg7gCU5PWFvHfjjeI4w"> </script>

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-12591115-2']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

	
	<link href="/live3dstatic/css/viewScene.css" rel="stylesheet" type="text/css" media="screen" />
	
	<script type="text/javascript" src="/live3dstatic/scripts/helperFunctions.js"></script>
	<script type="text/javascript" src="/live3dstatic/scripts/earth.js"></script>
	<script type="text/javascript" src="/live3dstatic/scripts/viewScene.js"></script>
	<script type="text/javascript" src="/live3dstatic/scripts/canvas.js"></script>

	<script type="text/javascript" src="/live3dstatic/scripts/matrix.js"></script>
	<script type="text/javascript" src="/live3dstatic/scripts/calibration.js"></script>
	
	<script type="text/javascript">
		var viewScene;
		
		{% if calibration %}
		var calib;
		function initCalibration(){
			var M = new Matrix(4,3, [[{{calibration.m11}}, {{calibration.m12}}, {{calibration.m13}}, {{calibration.m14}}], 
							         [{{calibration.m21}}, {{calibration.m22}}, {{calibration.m23}}, {{calibration.m24}}],
									 [{{calibration.m31}}, {{calibration.m32}}, {{calibration.m33}}, {{calibration.m34}}]]
							   );
			var camCenter = {x: {{calibration.cameraX}}, y: {{calibration.cameraY}}, z: {{calibration.cameraZ}},
							lat: {{scene.cameraLatitude}}, lon: {{scene.cameraLongitude}}, alt: {{scene.cameraAltitude}}};
			var pitch = {{scene.cameraTilt}};
			var heading = {{scene.cameraHeading}};
			var origin = {lat: {{calibration.originLatitude}}, lon: {{calibration.originLongitude}}, alt: {{calibration.originAltitude}} };
			var width = {{scene.width}};
			var height = {{scene.height}};
			calib = new Calibration(M, camCenter, pitch, heading, origin, width, height)
		}
		{% endif %}
		
		function init3D(){
		
			viewScene = new ViewScene('{{scene.url}}', {{scene.index}})
			
			// add all the models.
			{% for mesh in meshes %}
				viewScene.addModel({{mesh.index}}, {{mesh.originLatitude}}, {{mesh.originLongitude}}, {{mesh.originAltitude}});
			{% endfor %}
			
			viewScene.makeRefresher();
		
			{% if scene.calibrated %}
				jumpToFull({{scene.cameraLatitude}}, {{scene.cameraLongitude}}, {{scene.cameraAltitude}}, {{scene.cameraRoll}}, {{scene.cameraTilt}}, {{scene.cameraHeading}});
			{% else %}
				jumpTo( {{scene.cameraLatitude}}, {{scene.cameraLongitude}} );		
			{% endif %}
			
			{% if calibration %}
			initCalibration();
			{% endif %}
			
		}
		
		
	</script>
</head>
<body onload="googleInit('map3d-small')">
		<!--<div class="group" style='width:{{width}}px; height:{{height}}px;'>
			<div id='map3d-small' style='width:{{width}}px; height:{{height}}px;'></div>-->
		<div class="group" >
			<div id='map3d-small' style="height:{{height}}px;"></div>
			<!--
			<input type="checkbox" onchange="toggleBuildings();" id="showBuildings" checked/>
			<label for="showBuildings">  Show Buildings </label>
				
			<input type="checkbox" onchange="toggleGrayBuildings();" id="showGrayBuildings" checked/>
			<label for="showGrayBuildings">  Show Gray Buildings </label>
			-->
			
			<br/>
			{% if scene.calibrated %}
				<input type="button" onclick="jumpToFull({{scene.cameraLatitude}}, {{scene.cameraLongitude}}, {{scene.cameraAltitude}},
														{{scene.cameraRoll}}, {{scene.cameraTilt}}, {{scene.cameraHeading}});" value="Reset View" />
				<input type="checkbox" id="frustumBox" onchange="calib.toggleFrustum()"/>
				<label for="frustumBox"> Toggle Frustum </label>
				<input type="hidden" id="edgeLength" value="50" onchange="calib.updateFrustum()">
				<br/>
			{% else %}
				<input type="button" onclick="jumpTo( {{scene.cameraLatitude}}, {{scene.cameraLongitude}} );" value ="Reset View" />
			{% endif %}
			
			<br/>
			
			<p> This application shows the textures from a live webcam in 3D using Google Earth.</p>
			<p class="centered"><a href='http://www.projectlive3d.com/viewScene?scene={{scene.index}}' target="_parent">Visit Project Live3D</a> </p>
		</div>
</body>
</html>